<template>
  <div class="mod-order">
    <div class="order-container">
      <div class="order-stem">基本信息</div>
      <div class="order-content">
        <div class="order-item">
          <div class="item-left">订单编号:</div>
          <div class="item-right">{{dataInfo.orderNumber}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">买家姓名:</div>
          <div class="item-right">{{dataInfo.userName}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">应付金额:</div>
          <div class="item-right">{{dataInfo.payPrice}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">支付方式:</div>
          <div class="item-right">
            <template>
              <el-tag v-if="dataInfo.payType === 1" size="small" type="success">支付宝</el-tag>
              <el-tag v-else-if="dataInfo.payType === 2" size="small" type="success">微信</el-tag>
              <el-tag v-else-if="dataInfo.payType === 3" size="small" type="success">银联</el-tag>
              <el-tag v-else-if="dataInfo.payType === 4" size="small" type="success">货到付款</el-tag>
            </template>
          </div>
        </div>
      </div>
      <div class="order-content">
        <div class="order-item">
          <div class="item-left">订单来源:</div>
          <div class="item-right">
            <template>
              <el-tag v-if="dataInfo.sourceType === 1" size="small" type="success">PC端</el-tag>
              <el-tag v-else-if="dataInfo.sourceType === 2" size="small" type="success">APP端</el-tag>
            </template>
          </div>
        </div>
        <div class="order-item">
          <div class="item-left">订单状态:</div>
          <div class="item-right">
            <template>
              <el-tag v-if="dataInfo.orderStatus === 0" size="small" type="success">待付款</el-tag>
              <el-tag v-else-if="dataInfo.orderStatus === 1" size="small" type="success">待发货</el-tag>
              <el-tag v-else-if="dataInfo.orderStatus === 2" size="small" type="success">已发货</el-tag>
              <el-tag v-else-if="dataInfo.orderStatus === 3" size="small" type="success">已完成</el-tag>
              <el-tag v-else-if="dataInfo.orderStatus === 4" size="small" type="success">已关闭</el-tag>
              <el-tag v-else-if="dataInfo.orderStatus === 5" size="small" type="success">无效</el-tag>
            </template>
          </div>
        </div>
        <div class="order-item">
          <div class="item-left">订单积分:</div>
          <div class="item-right">{{dataInfo.orderIntegral}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">订单成长值:</div>
          <div class="item-right">{{dataInfo.orderGrowth}}</div>
        </div>
      </div>
      <div class="order-content">
        <div class="order-item">
          <div class="item-left">下单时间:</div>
          <div class="item-right">{{dataInfo.createTime}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">发货时间:</div>
          <div class="item-right">{{dataInfo.deliveryTime}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">签收时间:</div>
          <div class="item-right">{{dataInfo.receiveTime}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">签收状态:</div>
          <div class="item-right">
            <template>
              <el-tag v-if="dataInfo.confirmStatus === 0" size="small" type="danger">未签收</el-tag>
              <el-tag v-else-if="dataInfo.confirmStatus === 1" size="small" type="success">已签收</el-tag>
            </template>
          </div>
        </div>
        <div class="order-item">
          <div class="item-left">订单备注:</div>
          <div class="item-right">{{dataInfo.remarks}}</div>
        </div>
      </div>
    </div>
    <div class="order-container">
      <div class="order-stem">费用发票</div>
      <div class="order-content">
        <div class="order-item">
          <div class="item-left">订单总额:</div>
          <div class="item-right">{{dataInfo.totalPrice}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">运输费用:</div>
          <div class="item-right">{{dataInfo.transportPrice}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">促销减额:</div>
          <div class="item-right">{{dataInfo.promotionPrice}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">积分减额:</div>
          <div class="item-right">{{dataInfo.integralPrice}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">优惠减额:</div>
          <div class="item-right">{{dataInfo.couponPrice}}</div>
        </div>
      </div>
      <div class="order-content">
        <div class="order-item">
          <div class="item-left">发票类型:</div>
          <div class="item-right">
            <template>
              <el-tag v-if="dataInfo.billType === 0" size="small" type="warning">不开发票</el-tag>
              <el-tag v-else-if="dataInfo.billType === 1" size="small" type="success">电子发票</el-tag>
              <el-tag v-else-if="dataInfo.billType === 2" size="small" type="success">纸质发票</el-tag>
            </template>
          </div>
        </div>
        <div class="order-item">
          <div class="item-left">发票抬头:</div>
          <input class="item-right" type="text" v-model="dataInfo.billHeader">
        </div>
        <div class="order-item">
          <div class="item-left">发票内容:</div>
          <input class="item-right" type="text" v-model="dataInfo.billContent">
        </div>
        <div class="order-item">
          <div class="item-left">收票人电话:</div>
          <input class="item-right" type="text" v-model="dataInfo.billReceiverPhone">
        </div>
        <div class="order-item">
          <div class="item-left">收票人邮箱:</div>
          <input class="item-right" type="text" v-model="dataInfo.billReceiverEmail">
        </div>
      </div>
      <div class="order-content">
        <div class="order-item">
          <div class="item-left">支付时间:</div>
          <div class="item-right">{{dataInfo.payTime}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">支付积分:</div>
          <div class="item-right">{{dataInfo.payIntegral}}</div>
        </div>
   
      </div>
    </div>
    <div class="order-container">
      <div class="order-stem">物流发货</div>
      <div class="order-content">
        <div class="order-item">
          <div class="item-left">物流公司:</div>
          <div class="item-right">{{dataInfo.deliveryCompany}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">物流编号:</div>
          <div class="item-right">{{dataInfo.deliveryNumber}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">自动确认天数:</div>
          <div class="item-right">{{dataInfo.automaticConfirm}}</div>
        </div>
        <div class="order-item">
          <div class="item-left">发货地址:</div>
          <div class="item-right">{{dataInfo.deliveryAddress}}</div>
        </div>
      </div>
      <div class="order-content">
        <div class="order-item">
          <div class="item-left">收货人姓名:</div>
          <input class="item-right" type="text" v-model="dataInfo.receiverName">
        </div>
        <div class="order-item">
          <div class="item-left">收货人电话:</div>
          <input class="item-right" type="text" v-model="dataInfo.receiverPhone">
        </div>
        <div class="order-item">
          <div class="item-left">收货地址邮编:</div>
          <input class="item-right" type="text" v-model="dataInfo.receiverPostalCode">
        </div>
      </div>
      <div class="order-content">
        <div class="order-item">
          <div class="item-left">收货省份:</div>
          <input class="item-right" type="text" v-model="dataInfo.receiverProvince">
        </div>
        <div class="order-item">
          <div class="item-left">收货城市:</div>
          <input class="item-right" type="text" v-model="dataInfo.receiverCity">
        </div>
        <div class="order-item">
          <div class="item-left">收货区县:</div>
          <input class="item-right" type="text" v-model="dataInfo.receiverRegion">
        </div>
        <div class="order-item">
          <div class="item-left">详细地址:</div>
          <input class="item-right" type="text" v-model="dataInfo.receiverAddress">
        </div>
      </div>
    </div>
    <template style="margin-top:50px;">
      <el-button type="info" size="mini" style="margin-left:45%;" @click="back()">返回</el-button>
      <el-button type="success" size="mini" style="margin-left:3%;" @click="confirm()">确认</el-button>
    </template>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        id: '',
        dataInfo: {}
      }
    },
    activated () {
      this.getDataList()
      this.id = this.$route.query.orderId
    },
    created () {
      this.id = this.$route.query.orderId
    },
    methods: {
      // 订单详情
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl(`/mall-order/order/info/queryOrderById/${this.id}`),
          method: 'get'
        }).then(({data}) => {
          if (data.data && data.code === 200) {
            this.dataInfo = data.data
          } else {
            this.$message({
              showClose: true,
              message: data.message,
              type: 'warning',
              center: true
            })
          }
        })
      },
      // 返回
      back () {
        this.$router.push({path: '/order-order'})
      },
      // 确认
      confirm () {
        console.log(this.dataInfo)
        this.$http({
          url: this.$http.adornUrl(`/mall-order/order/info/updateOrder`),
          method: 'post',
          data: this.dataInfo
        }).then(({data}) => {
          if (data.data && data.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.$router.push('/order-order')
              }
            })
          } else {
            this.$message({
              showClose: true,
              message: data.message,
              type: 'warning',
              center: true
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
.order-container{
  background-color: #f0f0f0;
  border-radius: 5px;
  box-shadow: 0 0 5px 5px rgba(228, 227, 227, 0.3);  /* 设置模拟的虚化边框 */
  overflow: hidden;
  margin: 10px auto;
}
.order-stem{
  font-size: 25px;
  font-family: 华文行楷;
  color: tomato;
  padding: 10px 10px 0 10px;
}
.order-content{
  width: 33.3%;
  float: left;
  padding: 10px;
}
.order-item{
  display: flex;
  margin: 20px 0 20px 10px;
  font-size: 15px;
}
.item-left{
  font-weight: bold;
}
.item-right{
  margin-left: 15px;
}
input{
  margin-top: -3px;
  border: 1px solid tomato;
  outline: none;
}
</style>